<template>
  <el-dialog
    :title="viewMode ? '查看填报数据' : '在线填报'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="65%"
    fullscreen>
    <el-form class="monitor-report1" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">
      <table class="table table-bordered" style="width: 900px;" id="tableform">
			<colgroup>
				<col width="357" style=";width:357px">
				<col width="147" style=";width:147px">
				<col width="147" style=";width:147px">
				<col width="140" style=";width:140px">
				<col width="147" style=";width:147px">
				<col width="350" style=";width:351px">
			</colgroup>
			<tbody>
				<tr style=";height:26px" class="firstRow">
					<td width="357" style="">填报单位</td>
					<td width="147" style=""><input v-model="dataForm.unitName" name="unit" type="text" class="form-control"></td>
					<td width="147" style=""><br></td>
					<td width="140" style=""><br></td>
					<td width="147" style=""><br></td>
					<td width="351" style=""><br></td>
				</tr>
				<tr style=";height:26px">
					<td width="357" style="border-top: none;">指标名称</td>
					<td width="147" style="">代码</td>
					<td width="147" style="">单位</td>
					<td width="140" style="border-left: none;">截至2016年底</td>
					<td style="border-top:none;border-left:none">截至2017年底</td>
					<td width="351" style="border-top: none;">指标释义</td>
				</tr>
				<tr
					v-for="(item, index) in indexList"
					:key="item.id"
					style=";height:26px">
					<td width="357" style="">{{item.indexName}}</td>
					<input v-model="dataForm.indexName[index]"  type="hidden">
					<td width="147" style="">{{item.indexCode}}</td>
					<input v-model="dataForm.indexCode[index]"  type="hidden">
					<td width="147" style="">{{item.indexUnit}}</td>
					<input v-model="dataForm.indexUnit[index]"  type="hidden">
					<td width="147" style=""><input v-if="item.indexCode" v-model="dataForm.year1[index]" onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');if(isNaN(value))execCommand('undo');" type="text" class="form-control"></td>
					<td width="147" style=""><input v-if="item.indexCode" v-model="dataForm.year2[index]" onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');if(isNaN(value))execCommand('undo');"  type="text" class="form-control"></td>
					<td width="351" style="">{{item.indexRemark}}</td>
					<input v-model="dataForm.indexRemark[index]"  type="hidden">
				</tr>
				<tr style=";height:26px">
					<td style="border-top: none;">负责人：</td>
					<td style="border-top:none"><input v-model="dataForm.dutyer" name="leadingOfficial" type="text" class="form-control"></td>
					<td style="border-top:none">填报人：</td>
					<td style="border-top:none"><input v-model="dataForm.reporter" name="fillPerson" type="text" class="form-control"></td>
					<td style="border-top:none">填表日期：&nbsp;</td>
					<td><el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="dataForm.reportTime" size="mini" type="datetime" ></el-date-picker></td>
				</tr>
				<tr style=";height:26px">
					<td colspan="6" style="">填报说明：本表指标一律保留小数点后两位数。</td>
				</tr>
			</tbody>
    </table>  
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button v-if="!viewMode" type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
		visible: false,
		viewMode: false,
		indexList: [],
        dataForm: {
          reportId: 0,
          taskUserId: '',
          dutyer: '',
          reporter: '',
          reportTime: '',
		  unitName: '',
          indexName: [],
          indexCode: [],
          indexUnit: [],
          year1: [],
          year2: [],
          indexRemark: []
        },
        dataRule: {
          
        }
      }
    },
    methods: {
      init (taskUserId, reportId, mode) {
				if(mode == 'view'){
					this.viewMode = true;
				}else{
					this.viewMode = false;
				}
        this.dataForm.reportId = reportId || 0
        this.dataForm.taskUserId = taskUserId || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.reportId) {
            this.$http({
              url: this.$http.adornUrl(`/frt/monitorreport1/info/${this.dataForm.reportId}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
								this.indexList = data.list
								this.dataForm.dutyer = data.list[0].dutyer
								this.dataForm.reporter = data.list[0].reporter
								this.dataForm.reportTime = data.list[0].reportTime
								this.dataForm.unitName = data.list[0].unitName
								this.dataForm.taskUserId = data.list[0].taskUserId
				this.dataForm.indexCode = data.list.map(item => {
					return item.indexCode
				})
				this.dataForm.indexName = data.list.map(item => {
					return item.indexName
				})
				this.dataForm.indexUnit = data.list.map(item => {
					return item.indexUnit
				})
				this.dataForm.year1 = data.list.map(item => {
					return item.year1
				})
				this.dataForm.year2 = data.list.map(item => {
					return item.year2
				})
				this.dataForm.indexRemark = data.list.map(item => {
					return item.indexRemark
				})
              }
            })
          }else{
			  this.$http({
					url: this.$http.adornUrl('/frt/monitorexcel/list2'),
					method: 'get',
					params: this.$http.adornParams()
				}).then(({data}) => {
					if (data && data.code === 0) {
						this.indexList = data.list
						this.dataForm.indexCode = data.list.map(item => {
							return item.indexCode
						})
						this.dataForm.indexName = data.list.map(item => {
							return item.indexName
						})
						this.dataForm.indexUnit = data.list.map(item => {
							return item.indexUnit
						})
						this.dataForm.year1 = data.list.map(item => {
							return item.year1
						})
						this.dataForm.year2 = data.list.map(item => {
							return item.year2
						})
						this.dataForm.indexRemark = data.list.map(item => {
							return item.indexRemark
						})
					} else {
						this.indexList = []
					}
				})
		  }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {

			var list = []
			var _this = this;
			var idx = 0;
			var list = this.indexList.map(item => {
				var monitor = {}
				monitor['reportId'] = _this.dataForm.taskUserId
				monitor['taskUserId'] = _this.dataForm.taskUserId
				monitor['dutyer'] = _this.dataForm.dutyer
				monitor['reporter'] = _this.dataForm.reporter
				monitor['reportTime'] = _this.dataForm.reportTime
				monitor['unitName'] = _this.dataForm.unitName
				monitor['indexCode'] = this.dataForm.indexCode[idx] ? this.dataForm.indexCode[idx] : ''
				monitor['indexName'] = _this.dataForm.indexName[idx] ? _this.dataForm.indexName[idx] : ''
				monitor['indexUnit'] = _this.dataForm.indexUnit[idx] ? _this.dataForm.indexUnit[idx] : ''
				monitor['year1'] = _this.dataForm.year1[idx] ? _this.dataForm.year1[idx] : ''
				monitor['year2'] = _this.dataForm.year2[idx] ? _this.dataForm.year2[idx] : ''
				monitor['indexRemark'] = _this.dataForm.indexRemark[idx] ? _this.dataForm.indexRemark[idx] : ''
				idx = idx + 1;
				return monitor
			})

            this.$http({
              url: this.$http.adornUrl(`/frt/monitorreport1/${!this.dataForm.reportId ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData(list, false)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss">
			.monitor-report1 table {
				border-collapse: collapse;
			}
			
			.monitor-report1 td {
				vertical-align: middle;
				display: table-cell;
				border: solid 1px #ccc;
			}
			
			.monitor-report1 .title {
				text-align: center;
			}
			.monitor-report1 .yw-group{
				border: solid 1px #ccc;padding: 10px 10px 0px;
			}
			.monitor-report1 .yw-group .input-group{
				margin-bottom: 10px;
			}
			.monitor-report1 .group-no-1{
				float: left;margin-right: 5%;width: 45%;
			}

</style>
